<template>
    <div class="me">
        <!-- 导航栏 -->
        <van-nav-bar @nav-bar-title-text-color="text-white" title="瓜夕夕" fixed></van-nav-bar>
        <div class="me-content" :style="{height: h,width: w}">
            <div class="myheader">
                <van-image round width="5rem" height="5rem" src="https://img01.yzcdn.cn/vant/cat.jpeg"/>
                <div>
                    <div style="font-size:1.2rem" v-if="$store.state.islogin">{{time}} {{$store.state.username}}</div>
                    <div v-else>
                        <router-link to="/register">注册</router-link>&nbsp;|
                        <router-link to="/login">登录</router-link>
                    </div>
                </div>
            </div>
            <div class="me_foot">
                <van-skeleton title title-width="100%" :row="0"/>
                <van-cell title="我的订单" is-link to="/dingdan" icon="logistics" value="查看全部订单"></van-cell>
                <van-skeleton title title-width="100%" :row="0"/>
                <van-cell title="我的收藏" is-link to="collect" icon="like-o"></van-cell>
                <van-cell title="我的足迹" is-link to="history" icon="clock-o"></van-cell>
                <van-skeleton title title-width="100%" :row="0"/>
                <van-cell title="红包/卡券" is-link to="/cardvoucher" icon="cash-on-deliver"></van-cell>
                <van-cell title="设置" is-link to="/setting" icon="setting-o"></van-cell>
                
                <van-button v-if="$store.state.islogin" @click="logout" round type="primary" size="large">退出登录</van-button>
            </div>
        </div>
        <!-- 页脚 -->
        <van-tabbar v-model="active" border fixed router>
            <van-tabbar-item to="/" icon="home-o">首页</van-tabbar-item>
            <van-tabbar-item to="live" icon="video-o" dot>直播</van-tabbar-item>
            <van-tabbar-item to="news" icon='chat-o' badge="5">消息</van-tabbar-item>
            <van-tabbar-item to="shopping" icon="shopping-cart-o">购物车</van-tabbar-item>
            <van-tabbar-item name="me" to="me" icon="manager-o">我的</van-tabbar-item>
        </van-tabbar>
    </div>
</template>


<script>
export default {
    data() {
        return {
            active: "me",
            h:"",
            w:"",
            time:""
        };
    },
    methods: {
        logout(){
            sessionStorage.clear()
            window.location.reload()
        }
    },
    mounted() {
        this.h=window.screen.height+'px';
        this.w=window.screen.width+'px';
        let nowtime = new Date();
        let hour = nowtime.getHours()
        if(hour < 6){this.time="凌晨好!"}
        else if (hour < 9){this.time="早上好!"}
        else if (hour < 12){this.time="上午好!"}
        else if (hour < 14){this.time="中午好!"}
        else if (hour < 17){this.time="下午好!"}
        else if (hour < 19){this.time="傍晚好!"}
        else{this.time="晚上好!"}
  },
}
</script>

<style>
.me{
    position: fixed;
}
.me-content{
    background: #F1F1F1;
}
.me .van-nav-bar{
    background-color: rgb(86, 206, 132);
}
.me .myheader{
    position: relative;
    top:46px;
    background: #fff;
}
.me .me-content .me_foot{
    position: relative;
    top: 50px;
}
.me .van-nav-bar__title{
    color: aliceblue;
    font-size: 20px;
}

.me .van-button{
    position: relative;
    bottom: -50px;
}

.me .myheader{
    display: flex;
    box-sizing: border-box;
    padding: 10px 0 0px 10px;
    /* border-bottom: 1px solid black; */
}

.me .myheader div{
    line-height: 90px;
    margin-left: 10px;
    font-size: 1rem
} 

.me .myheader div a{
    color: black;
} 


.van-skeleton{
    padding: 0 !important;
}
</style>
